<!-- 消息页面 -->
<template>
	<view>
		<!-- 待办模块 -->
		<view class="lineClass">
			<!-- <view class="line1">
				<view class="left"></view>
				<text style="margin-left: 10rpx;">项目</text>
			</view> -->

			<view class="line2">
				<view class="itemClass" v-for="(item, index) in projectList" @click="goDetails(item)">
					<image class="iconClass" :src="item.src"></image>
					<view class="" style="margin-top: 10rpx;">{{ item.name }}</view>
					<!-- 角标 -->
					<view class="jiaobiao" v-show="item.num != 0">
						{{ item.num > 99 ? '99+' : item.num }}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="lineClass" v-if="isAprovel1 || isAprovel2">
			<view class="line2">
				<view
					class="itemClass"
					v-for="(item, index) in punchList"
					v-if="item.isShow"
					@click="goDetails(item)"
				>
					<image class="iconClass" :src="item.src"></image>
					<view class="" style="margin-top: 10rpx;">{{ item.name }}</view>
					<view class="jiaobiao" v-show="item.num != 0">
						{{ item.num > 99 ? '99+' : item.num }}
					</view>
				</view>
			</view>
		</view> -->
		<!-- v-if="isAprovel1" -->
		<view class="lineClass" @click="goDetails({ url: '/packageAdmin/pages/punchCard/messageList?type=1' })">
			<view class="rowBox">
				<view class="right">
					<view class="img">
						<image class="imgItem" :src="'../../static/backImg/wlogo3.png'"></image>
						<view class="jiaobiao" v-show="punchNum1 != 0">
							{{ punchNum1 > 99 ? '99+' : punchNum1 }}
						</view>
					</view>
					<view class="text">
						<view class="title">补卡审批</view>
						<view class="info">员工补卡审批</view>
					</view>
				</view>
			</view>
		</view>
		<!-- v-if="isAprovel2" -->
		<view class="lineClass" @click="goDetails({ url: '/packageAdmin/pages/punchCard/messageList?type=2' })">
			<view class="rowBox">
				<view class="right">
					<view class="img">
						<image class="imgItem" :src="'../../static/backImg/wlogo4.png'"></image>
						<view class="jiaobiao" v-show="punchNum2 != 0">
							{{ punchNum2 > 99 ? '99+' : punchNum2 }}
						</view>
					</view>
					<view class="text">
						<view class="title">请假审批</view>
						<view class="info">员工请假审批</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 待办模块结束 -->
		<view class="space"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				punchNum1: 0,
				punchNum2: 0,
				msgList: [], //角标数
				isAprovel1: false,
				isAprovel2: false,
				isAprovel3: false,
				// 待办列表
				projectList: [{
						name: '项目',
						url: '/pakageMessage/pages/message/backlog/projectBacklog',
						src: '../../static/backImg/top.png',
						num: 0
					},
					{
						name: '财务/行政',
						url: '/pakageMessage/pages/message/backlog/finnaceBacklog',
						src: '../../static/backImg/top2.png',
						num: 0
					},
					{
						name: '待阅',
						url: '/pakageMessage/pages/message/backlog/daiyue',
						src: '../../static/backImg/top3.png',
						num: 0
					},
					// {
					// 	name: '业务汇报',
					// 	url: '/packageChat/index/index',
					// 	src: '../../static/backImg/4-2.png',
					// 	num: 0
					// }
				],
				punchList: [{
						name: '补卡审批',
						url: '/packageAdmin/pages/punchCard/missExamine',
						src: '../../static/backImg/wlogo2.png',
						num: 0,
						isShow: false
					},
					{
						name: '请假审批',
						url: '/packageAdmin/pages/punchCard/leaveExamine',
						src: '../../static/backImg/wlogo1.png',
						num: 0,
						isShow: false
					}
					// {
					// 	name: '系统消息',
					// 	url: '/pakageMessage/pages/message/backlog/daiyue',
					// 	src: '../../static/backImg/wlogo3.png',
					// 	num: 0
					// }
				]
			};
		},
		onShow() {
			this.token = uni.getStorageSync('btlh_process_token') || '';
			this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
			this.getJiaoBiao();
			this.getAprovelStatus();
			this.getAprovelNum();
		},
		onLoad() {},
		methods: {
			// 判断是不是审批人
			async getAprovelStatus() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'ClockInApprove/is_approver',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				if (res.datas.is_department_head == '1') {
					this.isAprovel1 = true;
					this.punchList[0].isShow = true;
				}
				if (res.datas.is_department_head == '1' || res.datas.is_leave_admin == '1') {
					this.isAprovel2 = true;
					this.punchList[1].isShow = true;
				}
				if (res.datas.admin_state == '1' || res.datas.is_clockin_user == '1') {
					this.isAprovel3 = true;
				}
			},
			// 获取待审批数量
			async getAprovelNum() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'ClockInMessage/index',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				// this.punchList[0].num = res.datas.card_replacement_handle_count
				// this.punchList[1].num = res.datas.leave_handle_count
				this.punchNum1 = res.datas.card_count;
				this.punchNum2 = res.datas.leave_count;
			},
			// 获取角标数
			async getJiaoBiao() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Management/msg_list',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id
					}
				});
				if (res.code != 200)
					return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					});
				this.msgList = res.datas.list;
				for (let i = 0; i < this.msgList.length; i++) {
					this.projectList[i].num = this.msgList[i];
				}
			},
			// 前往条目页
			goDetails(val) {
				if (val.url == '') {
					return uni.showToast({
						title: '该功能正努力完成>-<',
						icon: 'none'
					});
				}

				uni.navigateTo({
					url: val.url
				});
			}
		}
	};
</script>

<style lang="scss">
	// 模块间隔断
	.space {
		width: 100%;
		height: 30rpx;
	}

	.lineClass {
		box-shadow: 1px 3px 15px 0px rgba(3, 70, 126, 0.2);
		padding-top: 40rpx;
		padding-bottom: 40rpx;

		.line1 {
			display: flex;
			flex-direction: row;
			align-items: center;

			.left {
				margin-left: 40rpx;
				width: 10rpx;
				height: 30rpx;
				background: #2eb3ff;
			}
		}

		.line2 {
			display: flex;
			flex-direction: row;
			// flex-wrap: wrap;
		}

		.itemClass {
			width: 200rpx;
			// width: 150rpx;
			font-size: 24rpx;
			margin-top: 25rpx;
			margin-left: 40rpx;
			// margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.jiaobiao {
				width: 48rpx;
				height: 35rpx;
				border-radius: 35rpx;
				background-color: #ff5c24;
				color: #ffffff;
				position: absolute;
				top: -20rpx;
				right: 35rpx;
				text-align: center;
				font-size: 24rpx;
			}
		}

		.iconClass {
			width: 70rpx;
			height: 70rpx;
			border-radius: 10rpx;
		}
	}

	.rowBox {
		display: flex;
		justify-content: flex-start;

		.right {
			display: flex;
			align-items: center;
			margin-left: 50rpx;

			.img {
				position: relative;

				.imgItem {
					width: 90rpx;
					height: 90rpx;
				}

				.jiaobiao {
					width: 48rpx;
					height: 35rpx;
					border-radius: 35rpx;
					background-color: #ff5c24;
					color: #ffffff;
					position: absolute;
					top: -20rpx;
					right: 0rpx;
					text-align: center;
					font-size: 24rpx;
				}
			}

			.text {
				margin-left: 30rpx;

				.title {
					margin-left: 10rpx;
					font-size: 34rpx;
					font-weight: 700;
					color: #bf9035;
				}

				.info {
					color: #666;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
